import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { lazy, type JSX } from "react";
import { createBrowserRouter } from "react-router-dom";
const App = lazy(() => import("../App"));
const Home = lazy(() => import("../pages/Home/index"));
const Error = lazy(() => import("../pages/Error/index"));
const Detail = lazy(() => import("../pages/Detail/index"));
const Login = lazy(() => import("../pages/Login/index"));
const My = lazy(() => import("../pages/My/index"));
const Props = lazy(() => import("../pages/Props/index"));
const Han = lazy(() => import("../pages/Props/Han/index"));

type homerouters = {
  path: string;
  element: JSX.Element;
  children?: homerouters;
  icon?: any;
  label?: string;
}[];

export const tabbar: homerouters = [
  {
    path: "/home",
    element: <Home></Home>,
    icon:<MenuFoldOutlined></MenuFoldOutlined>,
    label: "首页",
  },
  {
    path: "/my",
    element: <My></My>,
    icon:<MenuUnfoldOutlined></MenuUnfoldOutlined>,
    label: "我的",
  },
  {
    path: "/detail",
    element: <Detail></Detail>,
    icon: <UserOutlined></UserOutlined>,
    label: "详情页",
  },
  {
    path: "/props",
    element: <Props></Props>,
    icon:<MenuUnfoldOutlined></MenuUnfoldOutlined>,
    label: "分类",
    children: [
      {
        path: "/props/han",
        element: <Han></Han>,
        icon:<UserOutlined></UserOutlined>,
        label: "哈哈哈",
      },
    ],
  },
];

const routes: homerouters = [
  {
    path: "/",
    element: <App></App>,
    children: tabbar,
  },
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "*",
    element: <Error></Error>,
  },
];
const router = createBrowserRouter(routes);
export default router;
